<script setup lang="ts">
import { ref } from "vue";

import { useStore } from "@/store";
import { IRoomListParams } from "@/api/interface";
const cityCode = ref("");
const store = useStore();

const cityArr = [{
  cityCode: "hz",
  cityName: "杭州"
}, {
  cityCode: "sh",
  cityName: "上海"
}, {
  cityCode: "nj",
  cityName: "南京"
}, {
  cityCode: "cd",
  cityName: "成都"
}, {
  cityCode: "cq",
  cityName: "重庆"
}, {
  cityCode: "bj",
  cityName: "北京"
}, {
  cityCode: "sz",
  cityName: "苏州"
}];

function cityClick(tab: any) {
  let { name } = tab.props;
  cityCode.value = name;
  store.dispatch("getRoomList", { cityCode: cityCode.value, pageNo: 1 } as IRoomListParams);
}
</script>

<template>
  <!-- 城市筛选 -->
  <el-tabs v-model="cityCode" @tab-click="cityClick" type="card">
    <el-tab-pane
      v-for="item in cityArr"
      :key="item.cityCode"
      :label="item.cityName"
      :name="item.cityCode"
    ></el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss"></style>
